<!DOCTYPE html>
<html>
<head>
    <title>Grocery5</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
	<link rel="apple-touch-startup-image" href="startup.png" />
      <!-- For iPad -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://home.panahy.com/apple-touch-icon-72x72-precomposed.png">
    <!-- For iPhone 4 with high-resolution Retina display -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://home.panahy.com/apple-touch-icon-114x114-precomposed.png">
    <!-- For iOS 1- and Blackberry 6 -->
    <link rel="apple-touch-icon" href="http://home.panahy.com/apple-touch-icon.png">
    <!-- For pre-retina iPhone, iPod Touch, and Android 2.1+ devices -->
    <link rel="apple-touch-icon-precomposed" href="http://home.panahy.com/apple-touch-icon-precomposed.png">
    <!-- Startup image -->
    <link rel="apple-touch-startup-image" href="http://home.panahy.com/apple-touch-startup-image.png">
    		
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
	
	<script src="js/vendor/jquery-1.8.1.min.js"></script>
    <script src="js/vendor/kendo.mobile.min.js"></script>
    <script src="js/vendor/kendo.listview.min.js"></script>
	
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
	<style>
		input.product-count {
		background-color : red;
		border : 1px;
		}
    .countProd 
    {
        color : Maroon;
        position: absolute;
        top: 0.5em;
        right: 3em;
    }
    .selectedProd 
    {
        color : Maroon;
        position: absolute;
        top: 0.5em;
        right: 5em;
    }
	</style>
</head>
<body>
<div data-role="layout" data-id="overview-layout">
    <header data-role="header">
        <div data-role="navbar">
            <!--a class="nav-button" data-align="left" data-role="backbutton">Back</a-->
            <span data-role="view-title">Settings</span>
        </div>
    </header>

    <footer data-role="footer">
        <div data-role="tabstrip">
            <a data-icon="info"      href="#overview-info">Info</a>
            <a data-icon="compose"  href="#overview-prepare">Prepare</a>
            <a data-icon="cart" href="#overview-shop">Shop</a>
            <a data-icon="settings"  href="#overview-settings">Settings</a>
        </div>
    </footer>
</div>
<div data-role="view" data-layout="overview-layout" id="overview-shop" data-title="Things To Buy">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            To buy
            <ul id="shop-to-buy">
				<li><a class="shop-to-buy">1 - Row Insert</a></li>
				<li><a class="shop-to-buy">2 - Row Insert</a></li>
				<li><a class="shop-to-buy">3 - Row Insert</a></li>
				<li><a class="shop-to-buy">4 - Row Insert</a></li>
				<li><a class="shop-to-buy">5 - Row Insert</a></li>
				<li><a class="shop-to-buy">6 - Row Insert</a></li>

			</ul>
		</li>
        <li>
        	In the Cart
            <ul id="shop-in-cart">
                
				<li><a class="shop-in-cart">Row Insert</a></li>
				<li><a>7Row Insert</a></li>
				<li><a>8Row Insert</a></li>
				<li><a>9Row Insert</a></li>
				<li><a>0Row Insert</a></li>
				<li><a>0Row Insert</a></li>
            </ul>
        </li>
    </ul>
</div>
<div data-role="view" data-layout="overview-layout" id="overview-prepare" data-title="Prepare At Home">

	<ul data-role="listview" data-style="inset" data-type="group">
    <li>Known Products
        <ul id="listAvailableProducts"> </ul>
    </li>

    <li>
        
        <ul>
			<li>When you are done with preparation, you may press the botton below to indicate you 
            are done preparing it:<br />
             <a id="finishedPL" href="#" data-role="button" data-icon="play" >Finished</a>
           </li>
           <li>Or you may undo your changes and revert back to the last list you saved on this device:<br />
             <a id="revertPL" href="#" data-role="button" data-icon="rewind" >Revert Back</a>
           </li>
        </ul>
        
       
    </li>
</ul>
	 <div id="popPrepareProduct" data-role="popover" >
         <div data-role="view" data-layout="overview-layout" >
		 <div data-role="header">
            <div data-role="navbar">
                <span>Modify</span>
            </div>
        </div>
        <ul data-role="listview" data-style="inset">
            <li><label for="txtChangeProductName">Name:</label> <input type="text" id="txtChangeProductName" placeholder="Name of Product" /></li>
            <li><label for="txtChangeProductAmount">Amount:</label> <input type="number" id="txtChangeProductAmount" min="0" /></li>
            <li><label for="txtChangeProductToBuy">To Buy:</label> <input type="checkbox" id="txtChangeProductToBuy" data-role="switch" /></li>
            
        </ul>
         <div data-role="actionsheet view" data-layout="overview-layout" data-rel="actionsheet" >
            <a id="btnSaveProduct" data-role="button">Save</a>
            <a id="btnCancelProduct" data-role="button" >Cancel</a>
        </div>
		 </div>
	 </div>
</div>
<div data-role="view" data-layout="overview-layout" id="overview-settings" data-title="Settings">
<h2>Change your settings</h2>

<ul data-role="listview" data-style="inset" data-type="group">
    <li>
        
        <ul>
			<li>You can load the products list from the server. It will overwrite your current list:<br />
             <a href="#" data-role="button" data-icon="rewind" >Load Products List</a>
           </li>
        </ul>
        
        <ul>
            <li>You can save your current list to your device:<br />
            <a href="#" data-role="button" data-icon="downloads" >Save To Device</a>
            
            </li>
        </ul>
        
        <ul>
            <li>Or load the list from your device:<br />
            <a href="#" data-role="button" data-icon="refresh" >Get Last Saved List To Device</a>
            </li>
        </ul>
    </li>
</ul>

</div>



</div>
<div data-role="view" data-layout="overview-layout" id="overview-info" data-title="Info">
<h2>information about this app</h2>
<ul data-role="listview" data-style="inset" data-type="group">
    <li>
        Default button styles
        <ul>
			<li>Detail Disclose<a data-role="detailbutton" data-style="detaildisclose"></a></li>
            <li>Row Insert<a data-role="detailbutton" data-style="rowinsert"></a></li>
            <li>Row Delete<a data-role="detailbutton" data-style="rowdelete"></a></li>
        </ul>
    </li>
    <li>
        Custom icons
        <ul>
            <li>Battery level<input type="checkbox" data-role="switch" /></li>
        </ul>
    </li>
    <li>
        Link Items & Detail Buttons
        <ul>
            <li><a>Row Insert</a><a data-role="detailbutton" data-style="rowinsert"></a></li>
            <li><a>Battery Level</a><a data-role="detailbutton" data-icon="battery"></a></li>
			<li><a data-role="button" href="#foo" data-rel="popover">Say Hello</a></li>
        </ul>
    </li>
</ul>
</div>
<div id="template-products" style="display:none;">
    <li>
        <a data-role="listview-link" href="#" class="prodToEdit km-listview-link" ></a>
        <span class="selectedProd"></span>
        <span class="countProd"></span>
    </li>
    
</div>
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);				
    </script>
    
    <script src="js/wiring.js"></script>
    <script src="js/Grocery5.js"></script>
</body>
</html>
